<template>
  <div>
    <!-- 顶部 -->
    <nav-top class="navtop">{{ $route.query.tit }} </nav-top>
    <!-- 内容 -->
    <!-- 列表 -->
    <book-list :data="list">
      <template v-slot:header>
        <h3>当月排行({{ list.length }})</h3>
      </template>
    </book-list>
    <!-- 没数据 -->
    <van-empty description="该榜单暂无小说" v-if="list.length == 0" />
    <van-overlay :show="overlay">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getrank } from "../../api/rank/all.js";
export default {
  data() {
    return {
      list: [], // 底部的数据列表
      overlay: false,
    };
  },
  methods: {
    getData() {
      this.overlay = true;
      getrank(this.$route.query.id).then((data) => {
        if (data.ok) {
          this.list = data.ranking.books;
          this.overlay = false;
          console.log("排行榜下的列表数据获取成功");
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.navtop{
  background-color: white;
}
</style>